import { useMemo, useState } from 'react'
import {useSubscribe} from './store'

export default function Counter04() {
  const [counter, setCounter] = useSubscribe('counter04')

  const {state, actions} = useTgoggle2(true)

  console.log('counter04: ', counter)

  function clickHandle() {
    setCounter(counter + 1)
    actions();
  }
  return (
    <button onClick={clickHandle}>
      counter04: {counter} {state ? 'true' : 'false'}
    </button>
  )
}


function useToggle(value: boolean) {
  const [state, setState] = useState(value)

  const toggle = () => {
    setState(!state)
  }

  return {state, toggle}
}

function useTgoggle2(value: boolean, reverseValue?: boolean) {
  const [state, setState] = useState(value)

  function xxx() {
    const reverseValueOrigin = reverseValue === undefined ? !value : reverseValue;

    const toggle = () => {
      setState(prev => {
        return prev === value ? reverseValueOrigin : value
      })
    }
    return toggle
  }

  const actions = useMemo(xxx, [])

  return {state, actions}
}
